<template>
	<div class="Home">
		<h1>日历</h1>
		<main>
			<div class="operatingBox">
				<div class="left">
					<Button
						class="btn"
						@click="openPublicHolidayPopups"
					>
						<i class="iconfont iconicon-"></i>
						<p class="text">公休日</p>
					</Button>
					<Button
						class="btn"
						@click="setHoliday(0,2)"
					>
						<i class="iconfont iconicon-"></i>
						<p class="text">节假日</p>
					</Button>
					<Button
						class="btn"
						@click="setHoliday(1,2)"
					>
						<i class="iconfont iconicon-"></i>
						<p class="text">工作日</p>
					</Button>
					<Button
						class="btn"
						@click="openResetPopups"
					>
						<i class="iconfont iconzhongzhi"></i>
						<p class="text">重置</p>
					</Button>
					<Button
						class="btn"
						@click="openTimeRulePopups"
					>
						<i class="iconfont iconicon-"></i>
						<p class="text">设置</p>
					</Button>
				</div>
				<div class="right">
					<ul>
						<li>
							<i class="colorItem black"></i>
							<p>工作日</p>
						</li>
						<li>
							<i class="colorItem red"></i>
							<p>公休日</p>
						</li>
						<li>
							<i class="colorItem green"></i>
							<p>节假日</p>
						</li>
					</ul>
				</div>
			</div>
			<div class="yearBox">
				<i
					class="iconfont iconzuojiantou"
					@click="changeYear(Number(year) - 1)"
				></i>
				<p>{{year}}</p>
				<i
					class="iconfont iconyoujiantou1"
					@click="changeYear(Number(year) + 1)"
				></i>
			</div>
			<ul class="calendarUl">
				<li
					class="calendarItem"
					v-for="(item,index) in calendarDates"
					:key="index"
				>
					<Calendar
						v-if="refresh"
						:date="item.date"
						:holiday="item.holiday"
						@clickSelectDay="clickSelectHoliday"
					></Calendar>
				</li>
			</ul>
		</main>
		<PublicHolidayPopups
			v-if="publicHolidayPopups.isShow"
			:weeks="weeks"
			@closePublicHolidayPopups="closePublicHolidayPopups"
			@confirmPublicHolidayPopups="confirmPublicHolidayPopups"
		></PublicHolidayPopups>
		<ResetPopups
			v-if="resetPopups.isShow"
			@closeResetPopups="closeResetPopups"
			@confirmResetPopups="confirmResetPopups"
		></ResetPopups>
		<TimeRulePopups
			v-if="timeRulePopups.isShow"
			:weekRuleData="weekRuleData"
			@closeTimeRulePopups="closeTimeRulePopups"
			@confirmTimeRulePopups="confirmTimeRulePopups"
		></TimeRulePopups>
	</div>
</template>
<script>
import Moment from "moment";
import Calendar from "@/components/Calendar.vue";
import PublicHolidayPopups from "@/components/PublicHolidayPopups.vue";
import ResetPopups from "@/components/ResetPopups.vue";
import TimeRulePopups from "@/components/TimeRulePopups.vue";
export default {
	name: "Home",
	components: {
		Calendar,
		PublicHolidayPopups,
		ResetPopups,
		TimeRulePopups,
	},
	data () {
		return {
			year: new Date().getFullYear(), // 当前年份
			calendarDates: [], // 当前年份的数据
			holiday: null, // 获取当前年份的每个月的假期
			weeks: [
				{ text: "星期日", status: false, id: 0 },
				{ text: "星期一", status: false, id: 1 },
				{ text: "星期二", status: false, id: 2 },
				{ text: "星期三", status: false, id: 3 },
				{ text: "星期四", status: false, id: 4 },
				{ text: "星期五", status: false, id: 5 },
				{ text: "星期六", status: false, id: 6 },
			], // 星期数据
			selectHoliday: [], // 选中的假期
			refresh: true, // 是否刷新
			publicHolidayPopups: {
				isShow: false,
			}, // 公休日弹窗数据
			resetPopups: {
				isShow: false,
			}, // 重置弹窗数据
			timeRulePopups: {
				isShow: false,
			}, // 设置弹窗数据
			weekRuleData: [], // 星期规则数据
		};
	},
	mounted () {
		this.getHolidayData(this.year);
		this.getWeekData();
	},
	methods: {
		// 打开设置弹窗
		openTimeRulePopups () {
			this.timeRulePopups.isShow = true;
		},
		// 设置弹窗 - 确定
		confirmTimeRulePopups () {
			this.closeTimeRulePopups();
		},
		// 关闭设置弹窗
		closeTimeRulePopups () {
			this.timeRulePopups.isShow = false;
		},
		// 获取星期规则数据
		getWeekData () {
			this.$Spin.show();
			this.$store.dispatch("home/GetWeekData").then((res) => {
				this.$Spin.hide();
				if (res.statusCode === 200) {
					this.weekRuleData = res.data;
				}
			});
		},
		// 打开重置弹窗
		openResetPopups () {
			this.resetPopups.isShow = true;
		},
		// 重置弹窗 - 确定
		confirmResetPopups () {
			this.$Spin.show();
			this.$store.dispatch("home/DeleteReset").then((res) => {
				this.$Spin.hide();
				if (res.statusCode === 200) {
					this.closeResetPopups();
					this.refresh = false;
					this.$Message.success(res.message);
					this.getHolidayData(this.year);
				} else {
					this.$Message.error(res.message);
				}
			});
		},
		// 关闭重置弹窗
		closeResetPopups () {
			this.resetPopups.isShow = false;
		},
		// 公休日弹窗 - 确定
		confirmPublicHolidayPopups (weeks) {
			this.weeks.forEach((item) => {
				item.status = false;
			});
			weeks.forEach((item) => {
				this.weeks[item].status = true;
			});
			this.closePublicHolidayPopups();
			this.setHoliday(0, 1);
		},
		// 打开公休日弹窗
		openPublicHolidayPopups () {
			this.publicHolidayPopups.isShow = true;
		},
		// 关闭公休日弹窗
		closePublicHolidayPopups () {
			this.publicHolidayPopups.isShow = false;
		},
		// 设置日期类型，type： 0：设置假期，1：设置工作日；update_type： 1：设置星期，2：设置假期；
		setHoliday (type, update_type) {
			let weeks = [];
			this.weeks.forEach((item, index) => {
				if (item.status) {
					weeks.push(index);
				}
			});
			weeks = [...new Set(weeks)];
			this.$Spin.show();
			this.$store
				.dispatch("home/PostSetHoliday", {
					type,
					update_type,
					dates: this.selectHoliday,
					weeks,
				})
				.then((res) => {
					this.$Spin.hide();
					if (res.statusCode === 200) {
						this.refresh = false;
						this.$Message.success(res.message);
						this.selectHoliday = [];
						this.getHolidayData(this.year);
					} else {
						this.$Message.error(res.message);
					}
				});
		},
		// 点击选择的日期
		clickSelectHoliday (val) {
			val.forEach((item) => {
				this.selectHoliday.push(Moment(item).format("YYYY-MM-DD"));
			});
			this.selectHoliday = [...new Set(this.selectHoliday)];
		},
		// 改变年份
		changeYear (val) {
			this.year = val;
			this.getHolidayData(this.year);
		},
		// 获取日历数据
		getHolidayData (year) {
			this.$Spin.show();
			this.$store.dispatch("home/GetHolidayData", { year }).then((res) => {
				this.$Spin.hide();
				let data = res.data;
				this.calendarDates = [];
				this.holiday = data.holidays || [];
				data.week.forEach((item) => {
					this.weeks[item].status = true;
				});
				for (let i = 1; i <= 12; i++) {
					this.calendarDates.push({
						date: `${year}-${i}`,
						holiday: this.holiday[i - 1],
					});
				}
				this.year = year;
				this.refresh = true;
			});
		},
	},
};
</script>
<style lang="scss">
.Home {
	.ivu-btn {
		margin-right: 10px;
		> span {
			display: flex;
			align-items: center;
			i.iconfont {
				font-size: 16px;
				color: #333;
				margin-right: 5px;
			}
			p.text {
				font-size: 14px;
				color: #333;
			}
		}
	}
}
</style>
<style lang="scss" scoped>
.Home {
	h1 {
		text-align: center;
		font-size: 30px;
	}
	main {
		width: 1638px;
		margin: auto;
		padding-top: 20px;
		.operatingBox {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left {
			}
			.right {
				ul {
					display: flex;
					align-items: center;

					li {
						display: flex;
						align-items: center;
						margin-right: 10px;
						i.colorItem {
							display: block;
							width: 30px;
							height: 6px;
							border-radius: 4px;
							margin-right: 5px;
						}
						i.red {
							background-color: $red;
						}
						i.black {
							background-color: $black;
						}
						i.green {
							background-color: $green;
						}
						p {
							font-size: 14px;
							color: #333;
						}
					}
				}
			}
		}
		.yearBox {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 200px;
			margin: auto;
			padding: 20px 0;
			i {
				cursor: pointer;
				color: #333;
			}
			p {
				text-align: center;
				font-size: 24px;
				color: #000;
			}
		}
		.calendarUl {
			width: 1638px;
			height: 600px;
			display: flex;
			flex-wrap: wrap;
			margin: auto;
			justify-content: space-between;
			.calendarItem {
				width: 256px;
				height: 276px;
			}
		}
	}
}
</style>
